<template>
  <div id='wrap'>
    <h1>绑定内联样式 Style</h1>
    <p :style="{fontSize:`${fontSize}px`,color:fontColor}" @click="changeFontColor">唱跳rap篮球</p>
    <p :style="styleObject" @click="changeFontColor2">唱跳rap</p>
    <p :style="[styleObject2,styleObject]" @click="changeFontColor2">唱跳rap</p>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'scus',
}
</script>

<script lang='ts' setup>
import { reactive,ref } from 'vue'
const fontColor=ref('#acbcdef')
const fontSize=ref(16)
function changeFontColor(){
    fontColor.value='#000'
    setTimeout(()=>{
        fontSize.value=24
    },1000)
}
const styleObject=reactive({
    color:'red',
    fontSize:'30px'
})
function changeFontColor2(){
    styleObject.color='blue'
    styleObject.fontSize='60px'
}
const styleObject2=reactive({
    backgroundColor:'green'
})
</script>

<style scoped lang='scss'>
.active {
  color: darkorange;
}

.text-danger {
  background-color: red;
}

.text-success {
  background-color: green;
}

.active-new {
  font-size: 22px;
}
</style>